<template>
  <div class="widgepic">
    <div class="widgepic_main">
      <el-row
        :gutter="24"
        justify="space-around"
        style="margin-left: 0px;margin-right: 0px;width:100%;height:100%"
      >
        <el-col
          :span="12"
          style="padding-left:0px;padding-right:0px;height:100%"
        >
          <!-- 左侧上传/展示 -->
          <el-card :body-style="{ padding: '0px' }">
            <div class="main_box" :style="{ height: cardheight + 'px' }">
              <!-- 营销推广图 -->
              <div v-show="leftshow !== '5'">
                <!-- 渲染dom -->
                <div class="canvas_box">
                  <div id="mycanvas" class="mycanvas" ref="mycanvas">
                    <div v-if="uploadradio == 1" class="uploadradio1">
                      <div class="uploadone">
                        <div v-if="imgone == ''" style="width:100%;height:100%">
                          <el-upload
                            style="width:370px;height:370px; "
                            class="avatar-uploader"
                            :action="uploadaction"
                            :on-success="uploadSuccess1"
                            :on-error="uploadError"
                            :limit="1"
                            :multiple="false"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <div
                              style="width:100%;height:100%;line-height:370px;background-color:#adf;"
                            >
                              <div style="font-size:18px;color:black;">
                                点击上传图片
                              </div>
                            </div>
                          </el-upload>
                        </div>
                        <div v-else class="img_box">
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="imgone"
                            fit="fill"
                            crossOrigin="Anonymous"
                          ></el-image>
                          <i class="el-icon-close" @click="closeimg(1)"></i>
                        </div>
                      </div>
                    </div>
                    <div v-if="uploadradio == 2" class="uploadradio1">
                      <div class="uploadone">
                        <div v-if="imgone == ''" style="width:100%;height:100%">
                          <el-upload
                            style="width:370px;height:370px; "
                            class="avatar-uploader"
                            :action="uploadaction"
                            :on-success="uploadSuccess1"
                            :on-error="uploadError"
                            :limit="1"
                            :multiple="false"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <div
                              style="width:100%;height:100%;line-height:370px;background-color:#adf;"
                            >
                              <div style="font-size:18px;color:black;">
                                点击上传图片
                              </div>
                            </div>
                          </el-upload>
                        </div>
                        <div v-else class="img_box">
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="imgone"
                            fit="fill"
                            crossOrigin="Anonymous"
                          ></el-image>
                          <i class="el-icon-close" @click="closeimg(1)"></i>
                        </div>
                      </div>
                      <div class="display">
                        <div class="uploadtwo">
                          <div
                            v-if="imgtwo == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:185px;height:185px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess2"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:185px;background-color:#cfc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgtwo"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(2)"></i>
                          </div>
                        </div>
                        <div class="uploadtwo">
                          <div
                            v-if="imgthree == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:185px;height:185px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess3"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:185px;background-color:#fcc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgthree"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(3)"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="uploadradio == 3" class="uploadradio1 up3">
                      <div class="uploadone">
                        <div v-if="imgone == ''" style="width:100%;height:100%">
                          <el-upload
                            style="width:246px;height:246px; "
                            class="avatar-uploader"
                            :action="uploadaction"
                            :on-success="uploadSuccess1"
                            :on-error="uploadError"
                            :limit="1"
                            :multiple="false"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <div
                              style="width:100%;height:100%;line-height:246px;background-color:#adf;"
                            >
                              <div style="font-size:18px;color:black;">
                                点击上传图片
                              </div>
                            </div>
                          </el-upload>
                        </div>
                        <div v-else class="img_box">
                          <el-image
                            style="width: 100%; height: 100%"
                            :src="imgone"
                            fit="fill"
                            crossOrigin="Anonymous"
                          ></el-image>
                          <i class="el-icon-close" @click="closeimg(1)"></i>
                        </div>
                      </div>
                      <div style="display:inline-block">
                        <div class="uploadtwo">
                          <div
                            v-if="imgtwo == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:123px;height:123px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess2"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:123px;background-color:#cfc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgtwo"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(2)"></i>
                          </div>
                        </div>
                        <div class="uploadtwo">
                          <div
                            v-if="imgthree == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:123px;height:123px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess3"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:123px;background-color:#fcc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgthree"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(3)"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="uploadradio == 4" class="uploadradio1">
                      <div class="display">
                        <div class="uploadthree">
                          <div
                            v-if="imgone == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:185px;height:185px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess1"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:185px;background-color:#adf;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgone"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(1)"></i>
                          </div>
                        </div>
                        <div class="uploadthree">
                          <div
                            v-if="imgtwo == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:185px;height:185px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess2"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:185px;background-color:#cfc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgtwo"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(2)"></i>
                          </div>
                        </div>
                      </div>
                      <div class="display">
                        <div class="uploadthree">
                          <div
                            v-if="imgthree == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:185px;height:185px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess3"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:185px;background-color:#fcc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgthree"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(3)"></i>
                          </div>
                        </div>
                        <div class="uploadfour">
                          <div
                            v-if="imgfour == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:185px;height:185px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess4"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:185px;background-color:#cff;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgfour"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(4)"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="uploadradio == 5" class="uploadradio1 up5">
                      <div class="up5_left">
                        <div class="uploadone">
                          <div
                            v-if="imgone == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:222px;height:222px;"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess1"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:222px;background-color:#adf;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgone"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(1)"></i>
                          </div>
                        </div>
                        <div class="uploadone">
                          <div
                            v-if="imgfour == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:222px;height:222px;"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess4"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:222px;background-color:#cff;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgfour"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(4)"></i>
                          </div>
                        </div>
                      </div>
                      <div class="up5_right">
                        <div class="uploadtwo">
                          <div
                            v-if="imgtwo == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:148px;height:148px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess2"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:148px;background-color:#cfc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgtwo"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(2)"></i>
                          </div>
                        </div>
                        <div class="uploadtwo">
                          <div
                            v-if="imgthree == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:148px;height:148px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess3"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:148px;background-color:#fcc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgthree"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(3)"></i>
                          </div>
                        </div>
                        <div class="uploadtwo">
                          <div
                            v-if="imgfive == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:148px;height:148px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess5"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:148px;background-color:#ccf;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgfive"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(5)"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-if="uploadradio == 6" class="uploadradio1 up6">
                      <div class="up6_top">
                        <div class="uploadthree">
                          <div
                            v-if="imgone == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:185px;height:185px;"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess1"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:185px;background-color:#adf;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgone"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(1)"></i>
                          </div>
                        </div>
                        <div class="uploadthree">
                          <div
                            v-if="imgtwo == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:185px;height:185px;"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess2"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:185px;background-color:#cfc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgtwo"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(2)"></i>
                          </div>
                        </div>
                      </div>
                      <div class="up6_bot">
                        <div class="uploadtwo">
                          <div
                            v-if="imgthree == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:123px;height:123px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess3"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:123px;background-color:#fcc;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgthree"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(3)"></i>
                          </div>
                        </div>
                        <div class="uploadtwo">
                          <div
                            v-if="imgfour == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:123px;height:123px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess4"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:123px;background-color:#cff;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgfour"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(4)"></i>
                          </div>
                        </div>
                        <div class="uploadtwo">
                          <div
                            v-if="imgfive == ''"
                            style="width:100%;height:100%"
                          >
                            <el-upload
                              style="width:123px;height:123px;margin:0 auto"
                              class="avatar-uploader"
                              :action="uploadaction"
                              :on-success="uploadSuccess5"
                              :on-error="uploadError"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <div
                                style="width:100%;height:100%;line-height:123px;background-color:#ccf;"
                              >
                                <div style="font-size:18px;color:black;">
                                  点击上传图片
                                </div>
                              </div>
                            </el-upload>
                          </div>
                          <div v-else class="img_box">
                            <el-image
                              style="width: 100%; height: 100%"
                              :src="imgfive"
                              fit="fill"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <i class="el-icon-close" @click="closeimg(5)"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 定位圆标签 -->
                    <div
                      ref="showtabs"
                      id="showtabs"
                      class="show_tabs"
                      :style="{
                        top: potop,
                        left: poleft
                      }"
                      @mousedown="movedown($event, 'showtabs')"
                    >
                      <!-- 圆标签 -->
                      <div v-if="roundshow">
                        <div
                          :style="{
                            position: 'relative',
                            textAlign: 'center',
                            width:
                              sizeradio === '1'
                                ? '120px'
                                : sizeradio === '2'
                                  ? '150px'
                                  : '160px',
                            height:
                              sizeradio === '1'
                                ? '120px'
                                : sizeradio === '2'
                                  ? '150px'
                                  : '160px',
                            overflow: 'hidden'
                          }"
                        >
                          <img
                            :src="roundbgList[smallLabel]"
                            alt=""
                            :style="{
                              width:
                                sizeradio === '1'
                                  ? '120px'
                                  : sizeradio === '2'
                                    ? '150px'
                                    : '160px'
                            }"
                            srcset=""
                          />
                          <div
                            :style="{
                              position: 'absolute',
                              width:
                                sizeradio === '1'
                                  ? '120px'
                                  : sizeradio === '2'
                                    ? '150px'
                                    : '160px',
                              height:
                                sizeradio === '1'
                                  ? '120px'
                                  : sizeradio === '2'
                                    ? '150px'
                                    : '160px',
                              top: 0,
                              left: '0'
                            }"
                          >
                            <!-- 文字一 -->
                            <p
                              class="sh1"
                              :style="{
                                marginTop:
                                  sizeradio === '1'
                                    ? '27px'
                                    : sizeradio === '2'
                                      ? '35px'
                                      : '40px',
                                height: '14px',
                                fontWeight: 'bold',
                                color: title_color1,
                                fontSize: title_size1 + 'px',
                                fontFamily: title_famiy1
                              }"
                            >
                              {{ title1 }}
                            </p>
                            <!-- 文字二 -->
                            <p
                              class="sh2"
                              :style="{
                                height: '13px',
                                marginTop:
                                  sizeradio === '1'
                                    ? '5px'
                                    : sizeradio === '2'
                                      ? '10px'
                                      : '10px',
                                color: title_color2,
                                fontSize: title_size2 + 'px',
                                fontFamily: title_famiy2
                              }"
                            >
                              {{ title2 }}
                            </p>
                            <!-- 文字三 -->
                            <p
                              class="sh3"
                              :style="{
                                height: '13px',
                                marginTop:
                                  sizeradio === '1'
                                    ? '0px'
                                    : sizeradio === '2'
                                      ? '5px'
                                      : '6px',
                                color: title_color3,
                                fontSize: title_size3 + 'px',
                                fontFamily: title_famiy3
                              }"
                            >
                              {{ title3 }}
                            </p>
                            <!-- 文字四 -->
                            <p
                              class="sh4"
                              :style="{
                                height: '13px',
                                marginTop:
                                  sizeradio === '1'
                                    ? '0px'
                                    : sizeradio === '2'
                                      ? '6px'
                                      : '7px',
                                color: title_color4,
                                fontSize: title_size4 + 'px',
                                fontFamily: title_famiy4
                              }"
                            >
                              {{ title4 }}
                            </p>
                          </div>
                        </div>
                        <i
                          class="el-icon-close"
                          @click="closediv('showtabs')"
                        ></i>
                      </div>
                    </div>
                    <!-- 定位长标签 -->
                    <div
                      ref="showlong"
                      id="showlong"
                      class="show_tabs"
                      :style="{
                        top: potop,
                        left: poleft
                      }"
                      @mousedown="movedown($event, 'showlong')"
                    >
                      <!-- 长标签 -->
                      <div v-if="longshow">
                        <div
                          :style="{
                            position: 'relative',
                            textAlign: 'center',
                            width: '370px',
                            height: '41px',
                            overflow: 'hidden'
                          }"
                        >
                          <img
                            :src="stripbgList[stripradio]"
                            alt=""
                            :style="{
                              width: '370px',
                              height: '41px'
                            }"
                            srcset=""
                          />
                          <div
                            :style="{
                              position: 'absolute',
                              display: 'flex',
                              justifyContent: 'space-around',
                              width: '370px',
                              height: '41px',
                              top: '0px',
                              left: '0px'
                            }"
                          >
                            <!-- 文字一 -->
                            <p
                              class="sh1"
                              :style="{
                                width: '120px',
                                height: '41px',
                                lineHeight: '41px',
                                color: title_color5,
                                fontSize: title_size5 + 'px',
                                fontFamily: title_famiy5
                              }"
                            >
                              {{ title5 }}
                            </p>
                            <!-- 文字二 -->
                            <p
                              class="sh2"
                              :style="{
                                width: '120px',
                                height: '41px',
                                lineHeight: '41px',
                                color: title_color6,
                                fontSize: title_size6 + 'px',
                                fontFamily: title_famiy6
                              }"
                            >
                              {{ title6 }}
                            </p>
                            <!-- 文字三 -->
                            <p
                              class="sh3"
                              :style="{
                                width: '120px',
                                height: '41px',
                                lineHeight: '41px',
                                color: title_color7,
                                fontSize: title_size7 + 'px',
                                fontFamily: title_famiy7
                              }"
                            >
                              {{ title7 }}
                            </p>
                          </div>
                        </div>
                        <i
                          class="el-icon-close"
                          @click="closediv('showlong')"
                        ></i>
                      </div>
                    </div>
                    <!-- 定位价格标签 -->
                    <div
                      ref="showprice"
                      id="showprice"
                      class="show_tabs"
                      :style="{
                        top: potop,
                        left: poleft
                      }"
                      @mousedown="movedown($event, 'showprice')"
                    >
                      <div v-if="priceshow">
                        <div
                          :style="{
                            width: '370px',
                            height:
                              priceradio == 0
                                ? '81px'
                                : priceradio == 1 || priceradio == 6
                                  ? '128px'
                                  : priceradio == 2
                                    ? '100px'
                                    : priceradio == 3
                                      ? '132px'
                                      : priceradio == 4
                                        ? '70px'
                                        : priceradio == 5 || priceradio == 8
                                          ? '99px'
                                          : priceradio == 7
                                            ? '93px'
                                            : '100px'
                          }"
                          @click="showtabsdiv"
                        >
                          <div
                            class="iconfont_box"
                            :style="{
                              position: 'relative',
                              width: '370px',
                              height:
                                priceradio == 0
                                  ? '81px'
                                  : priceradio == 1 || priceradio == 6
                                    ? '128px'
                                    : priceradio == 2
                                      ? '100px'
                                      : priceradio == 3
                                        ? '132px'
                                        : priceradio == 4
                                          ? '70px'
                                          : priceradio == 5 || priceradio == 8
                                            ? '99px'
                                            : priceradio == 7
                                              ? '93px'
                                              : '100px'
                            }"
                          >
                            <img
                              :src="pricebgList[priceradio]"
                              alt=""
                              :style="{
                                width: '370px',
                                height:
                                  priceradio == 0
                                    ? '81px'
                                    : priceradio == 1 || priceradio == 6
                                      ? '128px'
                                      : priceradio == 2
                                        ? '100px'
                                        : priceradio == 3
                                          ? '132px'
                                          : priceradio == 4
                                            ? '70px'
                                            : priceradio == 5 || priceradio == 8
                                              ? '99px'
                                              : priceradio == 7
                                                ? '93px'
                                                : '100px'
                              }"
                              srcset=""
                            />
                            <div
                              class="position_text"
                              :style="{
                                width: '370px',
                                overflow: 'hidden',
                                height:
                                  priceradio == 0
                                    ? '81px'
                                    : priceradio == 1 || priceradio == 6
                                      ? '128px'
                                      : priceradio == 2
                                        ? '100px'
                                        : priceradio == 3
                                          ? '132px'
                                          : priceradio == 4
                                            ? '70px'
                                            : priceradio == 5 || priceradio == 8
                                              ? '99px'
                                              : priceradio == 7
                                                ? '93px'
                                                : '100px',
                                top: '0px',
                                left: '0px'
                              }"
                            >
                              <!-- 文字一 -->
                              <p
                                class="sh1"
                                :style="{
                                  position: 'absolute',
                                  top:
                                    priceradio == 0
                                      ? '4px'
                                      : priceradio == 1
                                        ? '89px'
                                        : priceradio == 2
                                          ? '30px'
                                          : priceradio == 3
                                            ? '105px'
                                            : priceradio == 4
                                              ? '51px'
                                              : priceradio == 5
                                                ? '81px'
                                                : priceradio == 6
                                                  ? '58px'
                                                  : priceradio == 7
                                                    ? '74px'
                                                    : '15px',
                                  left:
                                    priceradio == 0
                                      ? '19px'
                                      : priceradio == 1
                                        ? '278px'
                                        : priceradio == 2
                                          ? '14px'
                                          : priceradio == 3
                                            ? '16px'
                                            : priceradio == 4
                                              ? '17px'
                                              : priceradio == 5
                                                ? '37px'
                                                : priceradio == 6
                                                  ? '34px'
                                                  : priceradio == 7
                                                    ? '12px'
                                                    : '7px',
                                  textDecoration:
                                    priceradio == 6 || priceradio == 8
                                      ? 'line-through'
                                      : '',
                                  color: title_color8,
                                  fontSize: title_size8 + 'px',
                                  fontFamily: title_famiy8
                                }"
                              >
                                {{ title8 }}
                              </p>
                              <!-- 文字二 -->
                              <p
                                class="sh2"
                                :style="{
                                  position: 'absolute',
                                  top:
                                    priceradio == 0
                                      ? '40px'
                                      : priceradio == 1
                                        ? '50px'
                                        : priceradio == 2
                                          ? '60px'
                                          : priceradio == 3
                                            ? '53px'
                                            : priceradio == 4
                                              ? '15px'
                                              : priceradio == 5
                                                ? '38px'
                                                : priceradio == 6
                                                  ? '75px'
                                                  : priceradio == 7
                                                    ? '40px'
                                                    : '60px',
                                  left:
                                    priceradio == 0
                                      ? '23px'
                                      : priceradio == 1
                                        ? '277px'
                                        : priceradio == 2
                                          ? '28px'
                                          : priceradio == 3
                                            ? '16px'
                                            : priceradio == 4
                                              ? '31px'
                                              : priceradio == 5
                                                ? '43px'
                                                : priceradio == 6
                                                  ? '34px'
                                                  : priceradio == 7
                                                    ? '23px'
                                                    : '27px',
                                  fontWeight: 'bold',
                                  color: title_color9,
                                  fontSize: title_size9 + 'px',
                                  fontFamily: title_famiy9
                                }"
                              >
                                {{ title9 }}
                              </p>
                              <!-- 文字三 -->
                              <p
                                class="sh3"
                                :style="{
                                  position: 'absolute',
                                  top:
                                    priceradio == 0
                                      ? '12px'
                                      : priceradio == 1
                                        ? '47px'
                                        : priceradio == 2
                                          ? '25px'
                                          : priceradio == 3
                                            ? '105px'
                                            : priceradio == 4
                                              ? '48px'
                                              : priceradio == 5
                                                ? '37px'
                                                : priceradio == 6
                                                  ? '150px'
                                                  : priceradio == 7
                                                    ? '33px'
                                                    : '15px',
                                  left:
                                    priceradio == 0
                                      ? '116px'
                                      : priceradio == 1
                                        ? '22px'
                                        : priceradio == 2
                                          ? '108px'
                                          : priceradio == 3
                                            ? '128px'
                                            : priceradio == 4
                                              ? '145px'
                                              : priceradio == 5
                                                ? '130px'
                                                : priceradio == 6
                                                  ? '34px'
                                                  : priceradio == 7
                                                    ? '110px'
                                                    : '112px',
                                  color: title_color10,
                                  fontSize: title_size10 + 'px',
                                  fontFamily: title_famiy10
                                }"
                              >
                                {{ title10 }}
                              </p>
                              <!-- 文字四 -->
                              <p
                                class="sh4"
                                :style="{
                                  position: 'absolute',
                                  top:
                                    priceradio == 0
                                      ? '38px'
                                      : priceradio == 1
                                        ? '81px'
                                        : priceradio == 2
                                          ? '50px'
                                          : priceradio == 3
                                            ? '55px'
                                            : priceradio == 4
                                              ? '10px'
                                              : priceradio == 5
                                                ? '56px'
                                                : priceradio == 6
                                                  ? '85px'
                                                  : priceradio == 7
                                                    ? '51px'
                                                    : '53px',
                                  left:
                                    priceradio == 0
                                      ? '116px'
                                      : priceradio == 1
                                        ? '12px'
                                        : priceradio == 2
                                          ? '125px'
                                          : priceradio == 3
                                            ? '128px'
                                            : priceradio == 4
                                              ? '127px'
                                              : priceradio == 5
                                                ? '130px'
                                                : priceradio == 6
                                                  ? '117px'
                                                  : priceradio == 7
                                                    ? '115px'
                                                    : '112px',
                                  fontWeight: 'bold',
                                  color: title_color11,
                                  fontSize: title_size11 + 'px',
                                  fontFamily: title_famiy11
                                }"
                              >
                                {{ title11 }}
                              </p>
                            </div>
                          </div>
                        </div>
                        <i
                          class="el-icon-close"
                          @click="closediv('showprice')"
                        ></i>
                      </div>
                    </div>
                  </div>
                  <!-- 导出按钮 -->
                  <div style="margin-top:10px">
                    <el-button
                      type="primary"
                      style="width:300px"
                      @click="saveYXImg('mycanvas')"
                    >合 成</el-button
                    >
                  </div>
                </div>
              </div>
              <div v-show="leftshow == 5">
                <!-- 秒杀预告 -->
                <div v-show="isshow == 1">
                  <!-- 渲染dom -->
                  <div class="canvas_box2">
                    <div id="miaocanvas" class="mycanvas" ref="miaocanvas">
                      <div style="position:relative">
                        <el-carousel
                          style="border-radius: 10px;"
                          indicator-position="none"
                          height="185px"
                          :autoplay="false"
                        >
                          <el-carousel-item
                            v-for="item in miaoimglist"
                            :key="item.url"
                          >
                            <el-image
                              style="width: 100%;"
                              :src="item.url"
                              fit="cover"
                              crossOrigin="Anonymous"
                            ></el-image>
                            <div class="position_box">
                              <p
                                class="show_title"
                                :style="{
                                  fontWeight: '700',
                                  lineHeight: '63px',
                                  color: title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <p
                                class="show_title"
                                :style="{
                                  lineHeight: '27px',
                                  color: title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                            </div>
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                      <div class="miaolist">
                        <el-radio-group
                          v-model="miaoradio"
                          @change="miaoradiochange"
                        >
                          <el-radio
                            v-for="(item, index) in miaoList"
                            :label="index"
                            :key="index"
                          >
                            <div class="miao_main">
                              <div
                                class="miao_img"
                                :style="{
                                  height: '162px',
                                  background: item.isblue
                                    ? '#7930EB'
                                    : '#FE5A12',
                                  backgroundRepeat: 'no-repeat',
                                  backgroundSize: '100% 100%'
                                }"
                              >
                                <div class="bg_num">{{ index + 1 }}</div>
                                <div class="miao_uploadone">
                                  <div
                                    v-if="item.imgurl == ''"
                                    style="width:139px;height:139px"
                                  >
                                    <el-upload
                                      style="width:139px;height:139px; background-color:#fff;border-radius:12px"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="
                                        (res, file, fileList, val) => {
                                          uploadSuccess6(
                                            res,
                                            file,
                                            fileList,
                                            index
                                          )
                                        }
                                      "
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:139px;"
                                      >
                                        <div
                                          style="font-size:35px;color:black;"
                                        >
                                          <div style="font-size:14px">
                                            点击上传图片{{ index + 1 }}
                                          </div>
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width:139px;height:139px"
                                      :src="item.imgurl"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i
                                      class="el-icon-close"
                                      @click="closeimg(6, index)"
                                    ></i>
                                  </div>
                                </div>
                                <div class="rigtitle">
                                  <div class="toptie">
                                    <p
                                      class="show_title"
                                      :style="{
                                        color: item.font[0].title_color1,
                                        fontSize:
                                          item.font[0].title_size1 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title1 }}
                                    </p>
                                    <div
                                      v-if="composingstyle == 2"
                                      style="margin-top:15px;"
                                    >
                                      <p
                                        class="show_title"
                                        :style="{
                                          padding: '8px 0',
                                          textAlign: 'left',
                                          color: item.font[0].title_color2,
                                          fontSize:
                                            item.font[0].title_size2 + 'px'
                                        }"
                                      >
                                        <span
                                          :style="{
                                            padding: '3px',
                                            background: item.isblue
                                              ? '#5E13CE'
                                              : '#F24F0E',
                                            borderRadius: '5px'
                                          }"
                                        >
                                          原价</span
                                        >{{ item.font[0].title2 }}
                                      </p>
                                      <p
                                        class="show_title"
                                        :style="{
                                          padding: '8px 0',
                                          textAlign: 'left',
                                          color: item.font[0].title_color3,
                                          fontSize:
                                            item.font[0].title_size3 + 'px'
                                        }"
                                      >
                                        <span
                                          :style="{
                                            padding: '3px',
                                            background: item.isblue
                                              ? '#5E13CE'
                                              : '#F24F0E',
                                            borderRadius: '5px'
                                          }"
                                        >
                                          卷后价</span
                                          >
                                        {{ item.font[0].title3 }}
                                      </p>
                                    </div>
                                    <div
                                      v-else
                                      style="height:32px;margin-top:30px;text-align:left;"
                                    >
                                      <span
                                        :style="{
                                          dispaly: 'inline-block',
                                          textAlign: 'left',
                                          color: item.font[0].title_color3,
                                          fontSize:
                                            item.font[0].title_size3 + 'px'
                                        }"
                                      >
                                        <span
                                          :style="{
                                            padding: '3px',
                                            background: item.isblue
                                              ? '#5E13CE'
                                              : '#F24F0E',
                                            borderRadius: '5px'
                                          }"
                                        >卷后价</span
                                        >
                                        {{ item.font[0].title3 }}
                                      </span>
                                      <span
                                        :style="{
                                          textDecoration: 'line-through',
                                          padding: '10px 0',
                                          textAlign: 'left',
                                          color: item.font[0].title_color2,
                                          fontSize:
                                            item.font[0].title_size2 + 'px'
                                        }"
                                      >
                                        {{ item.font[0].title2 }}
                                      </span>
                                    </div>
                                    <p
                                      class="show_title"
                                      :style="{
                                        position: 'absolute',
                                        bottom: '10px',
                                        width: '180px',
                                        zIndex: '2',
                                        borderRadius: '10px',
                                        height: '30px',
                                        lineHeight: '30px',
                                        backgroundColor: item.isblue
                                          ? '#DD19BF'
                                          : '#FFBC00',
                                        margin: '10px 0',
                                        textAlign: 'center',
                                        color: item.font[0].title_color4,
                                        fontSize:
                                          item.font[0].title_size4 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title4 }}
                                    </p>
                                  </div>
                                </div>
                              </div>
                              <i
                                class="el-icon-close"
                                style="top: 11px;"
                                @click="colsemiaolist"
                              ></i>
                            </div>
                          </el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <!-- 新增按钮 -->
                    <div style="margin-top:10px">
                      <el-button
                        type="primary"
                        style="width:300px"
                        @click="doaddlist"
                      >添 加</el-button
                      >
                    </div>
                  </div>
                </div>
                <!-- 爆款汇总 -->
                <div v-show="isshow == 2">
                  <!-- 渲染dom -->
                  <div class="canvas_box3">
                    <div id="baocanvas" class="mycanvas" ref="baocanvas">
                      <div class="top_bg">
                        <div class="position_box">
                          <p
                            class="show_title"
                            :style="{
                              fontWeight: '700',
                              lineHeight: '63px',
                              color: title_color1,
                              fontSize: title_size1 + 'px',
                              fontFamily: title_famiy1
                            }"
                          >
                            {{ title1 }}
                          </p>
                          <p
                            class="show_title"
                            :style="{
                              lineHeight: '40px',
                              color: title_color2,
                              fontSize: title_size2 + 'px',
                              fontFamily: title_famiy2
                            }"
                          >
                            {{ title2 }}
                          </p>
                        </div>
                      </div>
                      <div class="miaolist">
                        <el-radio-group
                          v-model="baoradio"
                          @change="baoradiochange"
                        >
                          <el-radio
                            v-for="(item, index) in baoList"
                            :label="index"
                            :key="index"
                          >
                            <div class="miao_main">
                              <div
                                class="miao_img"
                                :style="{
                                  height: '156px',
                                  backgroundImage: 'url(' + hot + ')',
                                  backgroundRepeat: 'no-repeat',
                                  backgroundSize: '100% 100%'
                                }"
                              >
                                <div class="miao_uploadone">
                                  <div
                                    v-if="item.imgurl == ''"
                                    style="width:139px;height:139px"
                                  >
                                    <el-upload
                                      style="width:139px;height:139px; background-color:#fff;border-radius:12px"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="
                                        (res, file, fileList, val) => {
                                          uploadSuccess7(
                                            res,
                                            file,
                                            fileList,
                                            index
                                          )
                                        }
                                      "
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:139px;background-color:#fff;border-radius:12px"
                                      >
                                        <div
                                          style="font-size:35px;color:black;"
                                        >
                                          <div style="font-size:14px">
                                            点击上传图片{{ index + 1 }}
                                          </div>
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width:139px;height:139px"
                                      :src="item.imgurl"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i
                                      class="el-icon-close"
                                      @click="closeimg(7, index)"
                                    ></i>
                                  </div>
                                </div>
                                <div class="rigtitle">
                                  <div class="toptie">
                                    <p
                                      class="show_title"
                                      :style="{
                                        color: item.font[0].title_color1,
                                        fontSize:
                                          item.font[0].title_size1 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title1 }}
                                    </p>
                                    <p
                                      :style="{
                                        width: '100%',
                                        overflow: 'hidden',
                                        paddingTop: '12px',
                                        textAlign: 'left',
                                        whiteSpace: 'initial',
                                        color: item.font[0].title_color2,
                                        fontSize:
                                          item.font[0].title_size2 + 'px'
                                      }"
                                    >
                                      {{ item.font[0].title2 }}
                                    </p>
                                    <div class="issue_box">
                                      <p
                                        class="show_title"
                                        :style="{
                                          marginRight: '8px',
                                          color: item.font[0].title_color3,
                                          fontSize:
                                            item.font[0].title_size3 + 'px'
                                        }"
                                      >
                                        {{ item.font[0].title3 }}单
                                      </p>

                                      <p
                                        class="show_title"
                                        :style="{
                                          textAlign: 'center',
                                          color: item.font[0].title_color4,
                                          fontSize:
                                            item.font[0].title_size4 + 'px'
                                        }"
                                      >
                                        {{ item.font[0].title4 }}
                                      </p>
                                    </div>
                                  </div>
                                </div>
                                <div
                                  :style="{
                                    width: '28px',
                                    height: '32px',
                                    top: '0px',
                                    left: 0,
                                    position: 'absolute',
                                    backgroundImage: 'url(' + baoicon + ')',
                                    backgroundRepeat: 'no-repeat',
                                    backgroundSize: '100% 100%'
                                  }"
                                >
                                  <div
                                    style="color:white;line-height:32px;text-align:center;font-size:22px;font-weight:600"
                                  >
                                    {{ index + 1 }}
                                  </div>
                                </div>
                              </div>
                              <i
                                class="el-icon-close"
                                style="top: 11px;"
                                @click="colsebaolist"
                              ></i>
                            </div>
                          </el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <!-- 新增按钮 -->
                    <div style="margin-top:10px">
                      <el-button
                        type="primary"
                        style="width:300px"
                        @click="addbaolist"
                      >添 加</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!-- 中间设置控制台 -->
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }">
            <div class="main_box" :style="{ height: cardheight + 'px' }">
              <div class="main_top">
                <el-radio-group v-model="leftshow" @change="setchange">
                  <el-radio-button label="1">拼图模板</el-radio-button>
                  <el-radio-button label="2">圆形标签</el-radio-button>
                  <el-radio-button label="3">长条标签</el-radio-button>
                  <el-radio-button label="4">价格标签</el-radio-button>
                  <el-radio-button label="5">商品列表</el-radio-button>
                </el-radio-group>
              </div>
              <div class="main_content">
                <div v-show="leftshow == 1">
                  <div class="show_top1">
                    <div class="uploadradio">
                      <el-radio-group
                        v-model="uploadradio"
                        @change="uplradchange"
                      >
                        <el-radio :label="1">
                          <div class="templatebox temp1">
                            <span class="img1"></span>
                          </div>
                        </el-radio>
                        <el-radio :label="2">
                          <div class="templatebox temp2">
                            <span class="img1"></span>
                            <span class="img2"></span>
                            <span class="img3"></span>
                          </div>
                        </el-radio>
                        <el-radio :label="3">
                          <div class="templatebox temp3">
                            <span class="img1"></span>
                            <div class="flexin">
                              <span class="img2"></span>
                              <span class="img3"></span>
                            </div>
                          </div>
                        </el-radio>
                        <el-radio :label="4">
                          <div class="templatebox temp4">
                            <span class="img1"></span>
                            <span class="img2"></span>
                            <span class="img3"></span>
                            <span class="img4"></span>
                          </div>
                        </el-radio>
                        <el-radio :label="5">
                          <div class="templatebox temp5">
                            <div>
                              <span class="img1"></span>
                              <span class="img4"></span>
                            </div>
                            <div>
                              <span class="img2"></span>
                              <span class="img3"></span>
                              <span class="img5"></span>
                            </div>
                          </div>
                        </el-radio>
                        <el-radio :label="6">
                          <div class="templatebox temp6">
                            <div>
                              <span class="img1"></span>
                              <span class="img2"></span>
                              <span class="img3"></span>
                              <span class="img4"></span>
                              <span class="img5"></span>
                            </div>
                          </div>
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                <div v-show="leftshow == 2">
                  <div class="graph3_box">
                    <el-radio-group v-model="smallLabel" @change="smallchange">
                      <el-radio
                        :label="index"
                        class="test"
                        v-for="(item, index) in roundbgList"
                        :key="index"
                      >
                        <div class="top_img graph3" @click="showtabsdiv">
                          <div class="iconfont_box">
                            <img
                              :src="item"
                              alt=""
                              :style="{
                                width:
                                  sizeradio === '1'
                                    ? '120px'
                                    : sizeradio === '2'
                                      ? '150px'
                                      : '160px',
                                marginTop:
                                  sizeradio === '1'
                                    ? '15px'
                                    : sizeradio === '2'
                                      ? '12px'
                                      : '11px'
                              }"
                              srcset=""
                            />
                            <div
                              class="position_text"
                              :style="{
                                width:
                                  sizeradio === '1'
                                    ? '120px'
                                    : sizeradio === '2'
                                      ? '150px'
                                      : '160px',
                                height:
                                  sizeradio === '1'
                                    ? '120px'
                                    : sizeradio === '2'
                                      ? '150px'
                                      : '160px',
                                top:
                                  sizeradio === '1'
                                    ? '15px'
                                    : sizeradio === '2'
                                      ? '12px'
                                      : '11px',
                                left:
                                  sizeradio === '1'
                                    ? '28px'
                                    : sizeradio === '2'
                                      ? '12px'
                                      : '8px'
                              }"
                            >
                              <!-- 文字一 -->
                              <p
                                class="sh1"
                                :style="{
                                  marginTop:
                                    sizeradio === '1'
                                      ? '27px'
                                      : sizeradio === '2'
                                        ? '35px'
                                        : '40px',
                                  height: '14px',
                                  fontWeight: 'bold',
                                  color:
                                    index == 8
                                      ? '#fc4b4b'
                                      : index == 9
                                        ? '#563cf6'
                                        : index == 11
                                          ? '#813f25'
                                          : title_color1,
                                  fontSize: title_size1 + 'px',
                                  fontFamily: title_famiy1
                                }"
                              >
                                {{ title1 }}
                              </p>
                              <!-- 文字二 -->
                              <p
                                class="sh2"
                                :style="{
                                  height: '13px',
                                  marginTop:
                                    sizeradio === '1'
                                      ? '5px'
                                      : sizeradio === '2'
                                        ? '10px'
                                        : '10px',
                                  color:
                                    index == 8
                                      ? '#fc4b4b'
                                      : index == 9
                                        ? '#563cf6'
                                        : index == 11
                                          ? '#813f25'
                                          : title_color2,
                                  fontSize: title_size2 + 'px',
                                  fontFamily: title_famiy2
                                }"
                              >
                                {{ title2 }}
                              </p>
                              <!-- 文字三 -->
                              <p
                                class="sh3"
                                :style="{
                                  height: '13px',
                                  marginTop:
                                    sizeradio === '1'
                                      ? '0px'
                                      : sizeradio === '2'
                                        ? '5px'
                                        : '6px',
                                  color:
                                    index == 8
                                      ? '#fc4b4b'
                                      : index == 9
                                        ? '#563cf6'
                                        : index == 11
                                          ? '#813f25'
                                          : title_color3,
                                  fontSize: title_size3 + 'px',
                                  fontFamily: title_famiy3
                                }"
                              >
                                {{ title3 }}
                              </p>
                              <!-- 文字四 -->
                              <p
                                class="sh4"
                                :style="{
                                  height: '13px',
                                  marginTop:
                                    sizeradio === '1'
                                      ? '4px'
                                      : sizeradio === '2'
                                        ? '6px'
                                        : '7px',
                                  color: title_color4,
                                  fontSize: title_size4 + 'px',
                                  fontFamily: title_famiy4
                                }"
                              >
                                {{ title4 }}
                              </p>
                            </div>
                          </div>
                        </div>
                      </el-radio>
                    </el-radio-group>
                  </div>
                  <div class="set_box">
                    <!-- 尺寸 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >尺寸</span
                      >
                      <el-select
                        v-model="sizeradio"
                        placeholder="请选择尺寸"
                        @change="sizechange"
                      >
                        <el-option label="小" value="1">
                          小
                        </el-option>
                        <el-option label="中" value="2">
                          中
                        </el-option>
                        <el-option label="大" value="3">
                          大
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字一 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字一</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title1"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size1" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color1"></el-color-picker>
                      <el-select v-model="title_famiy1" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字二 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字二</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title2"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size2" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color2"></el-color-picker>
                      <el-select v-model="title_famiy2" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字三 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字三</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title3"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size3" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color3"></el-color-picker>
                      <el-select v-model="title_famiy3" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字四 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字四</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title4"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size4" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color4"></el-color-picker>
                      <el-select v-model="title_famiy3" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div v-show="leftshow == 3">
                  <div class="graph4_box">
                    <el-radio-group v-model="stripradio" @change="stripchange">
                      <el-radio
                        :label="index"
                        class="test"
                        v-for="(item, index) in stripbgList"
                        :key="index"
                      >
                        <div class="top_img graph3" @click="showtabsdiv">
                          <div class="iconfont_box">
                            <img
                              :src="item"
                              alt=""
                              :style="{
                                width: '400px',
                                height: '51px'
                              }"
                              srcset=""
                            />
                            <div
                              class="position_text"
                              :style="{
                                width: '400px',
                                height: '51px',
                                top: '0px',
                                left: '0px'
                              }"
                            >
                              <!-- 文字一 -->
                              <p
                                class="sh1"
                                :style="{
                                  color: title_color5,
                                  fontSize: title_size5 + 'px',
                                  fontFamily: title_famiy5
                                }"
                              >
                                {{ title5 }}
                              </p>
                              <!-- 文字二 -->
                              <p
                                class="sh2"
                                :style="{
                                  color: title_color6,
                                  fontSize: title_size6 + 'px',
                                  fontFamily: title_famiy6
                                }"
                              >
                                {{ title6 }}
                              </p>
                              <!-- 文字三 -->
                              <p
                                class="sh3"
                                :style="{
                                  color: title_color7,
                                  fontSize: title_size7 + 'px',
                                  fontFamily: title_famiy7
                                }"
                              >
                                {{ title7 }}
                              </p>
                            </div>
                          </div>
                        </div>
                      </el-radio>
                    </el-radio-group>
                  </div>
                  <div class="set_box">
                    <!-- 文字一 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字一</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title5"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size5" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color5"></el-color-picker>
                      <el-select v-model="title_famiy5" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字二 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字二</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title6"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size6" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color6"></el-color-picker>
                      <el-select v-model="title_famiy6" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字三 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字三</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title7"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size7" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color7"></el-color-picker>
                      <el-select v-model="title_famiy7" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div v-show="leftshow == 4">
                  <div class="graph5_box">
                    <el-radio-group v-model="priceradio" @change="pricechange">
                      <el-radio
                        :label="index"
                        class="test"
                        v-for="(item, index) in pricebgList"
                        :key="index"
                      >
                        <div
                          class="top_img graph3"
                          :style="{
                            height:
                              index == 0
                                ? '81px'
                                : index == 1 || index == 6
                                  ? '128px'
                                  : index == 2
                                    ? '100px'
                                    : index == 3
                                      ? '132px'
                                      : index == 4
                                        ? '70px'
                                        : index == 5 || index == 8
                                          ? '99px'
                                          : index == 7
                                            ? '93px'
                                            : '100px'
                          }"
                          @click="showtabsdiv"
                        >
                          <div
                            class="iconfont_box"
                            :style="{
                              height:
                                index == 0
                                  ? '81px'
                                  : index == 1 || index == 6
                                    ? '128px'
                                    : index == 2
                                      ? '100px'
                                      : index == 3
                                        ? '132px'
                                        : index == 4
                                          ? '70px'
                                          : index == 5 || index == 8
                                            ? '99px'
                                            : index == 7
                                              ? '93px'
                                              : '100px'
                            }"
                          >
                            <img
                              :src="item"
                              alt=""
                              :style="{
                                width: '360px',
                                height:
                                  index == 0
                                    ? '81px'
                                    : index == 1 || index == 6
                                      ? '128px'
                                      : index == 2
                                        ? '100px'
                                        : index == 3
                                          ? '132px'
                                          : index == 4
                                            ? '70px'
                                            : index == 5 || index == 8
                                              ? '99px'
                                              : index == 7
                                                ? '93px'
                                                : '100px'
                              }"
                              srcset=""
                            />
                            <div
                              class="position_text"
                              :style="{
                                width: '360px',
                                height:
                                  index == 0
                                    ? '81px'
                                    : index == 1 || index == 6
                                      ? '128px'
                                      : index == 2
                                        ? '100px'
                                        : index == 3
                                          ? '132px'
                                          : index == 4
                                            ? '70px'
                                            : index == 5 || index == 8
                                              ? '99px'
                                              : index == 7
                                                ? '93px'
                                                : '100px',
                                top: '0px',
                                left: '0px'
                              }"
                            >
                              <!-- 文字一 -->
                              <p
                                class="sh1"
                                :style="{
                                  position: 'absolute',
                                  top:
                                    index == 0
                                      ? '7px'
                                      : index == 1
                                        ? '91px'
                                        : index == 2
                                          ? '33px'
                                          : index == 3
                                            ? '108px'
                                            : index == 4
                                              ? '54px'
                                              : index == 5
                                                ? '81px'
                                                : index == 6
                                                  ? '58px'
                                                  : index == 7
                                                    ? '76px'
                                                    : '15px',
                                  left:
                                    index == 0
                                      ? '17px'
                                      : index == 1
                                        ? '271px'
                                        : index == 2
                                          ? '14px'
                                          : index == 3
                                            ? '16px'
                                            : index == 4
                                              ? '17px'
                                              : index == 5
                                                ? '37px'
                                                : index == 6
                                                  ? '34px'
                                                  : index == 7
                                                    ? '12px'
                                                    : '7px',
                                  textDecoration:
                                    index == 6 || index == 8
                                      ? 'line-through'
                                      : '',
                                  color: title_color8,
                                  fontSize: title_size8 + 'px',
                                  fontFamily: title_famiy8
                                }"
                              >
                                {{ title8 }}
                              </p>
                              <!-- 文字二 -->
                              <p
                                class="sh2"
                                :style="{
                                  position: 'absolute',
                                  top:
                                    index == 0
                                      ? '43px'
                                      : index == 1
                                        ? '50px'
                                        : index == 2
                                          ? '63px'
                                          : index == 3
                                            ? '53px'
                                            : index == 4
                                              ? '20px'
                                              : index == 5
                                                ? '41px'
                                                : index == 6
                                                  ? '78px'
                                                  : index == 7
                                                    ? '46px'
                                                    : '63px',
                                  left:
                                    index == 0
                                      ? '23px'
                                      : index == 1
                                        ? '271px'
                                        : index == 2
                                          ? '28px'
                                          : index == 3
                                            ? '16px'
                                            : index == 4
                                              ? '31px'
                                              : index == 5
                                                ? '43px'
                                                : index == 6
                                                  ? '34px'
                                                  : index == 7
                                                    ? '23px'
                                                    : '27px',
                                  fontWeight: 'bold',
                                  color: title_color9,
                                  fontSize: title_size9 + 'px',
                                  fontFamily: title_famiy9
                                }"
                              >
                                {{ title9 }}
                              </p>
                              <!-- 文字三 -->
                              <p
                                class="sh3"
                                :style="{
                                  position: 'absolute',
                                  top:
                                    index == 0
                                      ? '17px'
                                      : index == 1
                                        ? '50px'
                                        : index == 2
                                          ? '29px'
                                          : index == 3
                                            ? '111px'
                                            : index == 4
                                              ? '51px'
                                              : index == 5
                                                ? '40px'
                                                : index == 6
                                                  ? '150px'
                                                  : index == 7
                                                    ? '36px'
                                                    : '17px',
                                  left:
                                    index == 0
                                      ? '116px'
                                      : index == 1
                                        ? '22px'
                                        : index == 2
                                          ? '99px'
                                          : index == 3
                                            ? '128px'
                                            : index == 4
                                              ? '145px'
                                              : index == 5
                                                ? '125px'
                                                : index == 6
                                                  ? '34px'
                                                  : index == 7
                                                    ? '105px'
                                                    : '112px',
                                  color: title_color10,
                                  fontSize: title_size10 + 'px',
                                  fontFamily: title_famiy10
                                }"
                              >
                                {{ title10 }}
                              </p>
                              <!-- 文字四 -->
                              <p
                                class="sh4"
                                :style="{
                                  position: 'absolute',
                                  top:
                                    index == 0
                                      ? '43px'
                                      : index == 1
                                        ? '81px'
                                        : index == 2
                                          ? '55px'
                                          : index == 3
                                            ? '61px'
                                            : index == 4
                                              ? '14px'
                                              : index == 5
                                                ? '60px'
                                                : index == 6
                                                  ? '90px'
                                                  : index == 7
                                                    ? '56px'
                                                    : '53px',
                                  left:
                                    index == 0
                                      ? '116px'
                                      : index == 1
                                        ? '12px'
                                        : index == 2
                                          ? '122px'
                                          : index == 3
                                            ? '124px'
                                            : index == 4
                                              ? '123px'
                                              : index == 5
                                                ? '127px'
                                                : index == 6
                                                  ? '115px'
                                                  : index == 7
                                                    ? '112px'
                                                    : '112px',
                                  fontWeight: 'bold',
                                  color: title_color11,
                                  fontSize: title_size11 + 'px',
                                  fontFamily: title_famiy11
                                }"
                              >
                                {{ title11 }}
                              </p>
                            </div>
                          </div>
                        </div>
                      </el-radio>
                    </el-radio-group>
                  </div>
                  <!-- 操作 -->
                  <div class="set_box">
                    <!-- 文字一 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字一</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title8"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size8" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color8"></el-color-picker>
                      <el-select v-model="title_famiy8" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字二 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字二</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title9"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size9" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker v-model="title_color9"></el-color-picker>
                      <el-select v-model="title_famiy9" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字三 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字三</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title10"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size10" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker
                        v-model="title_color10"
                      ></el-color-picker>
                      <el-select v-model="title_famiy10" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                    <!-- 文字四 -->
                    <div class="display" style="padding-top:20px;">
                      <span
                        style="dispaly:inline-block;width:70px;font-size:14px"
                      >文字三</span
                      >
                      <el-input
                        style="width:160px"
                        v-model="title11"
                        placeholder="请输入内容"
                      ></el-input>
                      <el-select v-model="title_size11" style="width:70px">
                        <el-option
                          v-for="item in sizeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-color-picker
                        v-model="title_color11"
                      ></el-color-picker>
                      <el-select v-model="title_famiy11" style="width:120px">
                        <el-option
                          v-for="item in famiyList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div v-show="leftshow == 5">
                  <div style="padding:10px 0;">
                    <el-radio
                      v-model="isshow"
                      size="small"
                      label="1"
                      border
                    >好货预告</el-radio
                    >
                    <el-radio
                      v-model="isshow"
                      size="small"
                      label="2"
                      border
                    >爆款汇总</el-radio
                    >
                  </div>
                  <div v-if="isshow == 1">
                    <div>
                      <div class="set_box">
                        <!-- 主题风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                          >主题风格</span
                          >
                          <el-select
                            v-model="stylechoose"
                            placeholder="请选择主题风格"
                            @change="stylechoosechange"
                          >
                            <el-option
                              v-for="item in stylechooseList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 排版风格 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                          >排版风格</span
                          >
                          <el-select
                            v-model="composingstyle"
                            placeholder="请选择排版风格"
                            @change="composingstylechange"
                          >
                            <el-option
                              v-for="item in composingstyleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                          >文字一</span
                          >
                          <el-input
                            style="width:220px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                            :predefine="predefineColors"
                          ></el-color-picker>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                          >文字二</span
                          >
                          <el-input
                            style="width:220px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                            :predefine="predefineColors"
                          ></el-color-picker>
                        </div>
                        <!-- 文字三-六 -->
                        <div v-if="miaoList.length > 0">
                          <div
                            class="miao00"
                            v-for="(item, index) in miaoList[miaoradio].font"
                            :key="index"
                          >
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text1 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title1"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size1"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color1"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text2 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title2"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size2"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color2"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text3 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title3"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size3"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color3"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text4 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title4"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size4"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color4"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="main_btn">
                      <div style="margin:20px 0;width:100%;margin-right:20px">
                        <!-- 导出按钮 -->
                        <div style="display: none;">
                          <input
                            type="file"
                            name="upload"
                            id="upload"
                            style="display: none;"
                          />
                        </div>
                        <el-button
                          type="primary"
                          size="small"
                          @click="saveAsImg('miaocanvas')"
                        >合 成</el-button
                        >
                        <el-button
                          type="primary"
                          size="small"
                          @mousedown.native="handleOk2('miaoimg')"
                          @click="handleOk('miaoimg')"
                        >复制</el-button
                        >
                        <a
                          download="营销图"
                          :href="saveurl"
                          style="width:100%;height:100%;margin-left:10px"
                        >
                          <el-button type="primary" size="small">
                            保存
                          </el-button>
                        </a>
                      </div>
                      <div>
                        <!-- style="width: 150px; height: 300px" -->
                        <el-image
                          id="miaoimg"
                          v-if="dourl !== ''"
                          :src="dourl"
                          fit="cover"
                        ></el-image>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div>
                      <div class="set_box">
                        <!-- 文字一 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                          >文字一</span
                          >
                          <el-input
                            style="width:220px"
                            v-model="title1"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size1" style="width:70px">
                            <el-option
                              v-for="item in sizeList2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color1"
                            :predefine="predefineColors"
                          ></el-color-picker>
                        </div>
                        <!-- 文字二 -->
                        <div class="display" style="padding-top:20px;">
                          <span
                            style="dispaly:inline-block;width:70px;font-size:14px"
                          >文字二</span
                          >
                          <el-input
                            style="width:220px"
                            v-model="title2"
                            placeholder="请输入内容"
                          ></el-input>
                          <el-select v-model="title_size2" style="width:70px">
                            <el-option
                              v-for="item in sizeList2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >
                            </el-option>
                          </el-select>
                          <el-color-picker
                            v-model="title_color2"
                            :predefine="predefineColors"
                          ></el-color-picker>
                        </div>
                        <!-- 文字三-六 -->
                        <div v-if="baoList.length > 0">
                          <div
                            class="miao00"
                            v-for="(item, index) in baoList[baoradio].font"
                            :key="index"
                          >
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text1 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title1"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size1"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color1"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text2 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title2"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size2"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color2"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text3 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title3"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size3"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color3"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >{{ item.text4 }}</span
                              >
                              <el-input
                                style="width:220px"
                                v-model="item.title4"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select
                                v-model="item.title_size4"
                                style="width:70px"
                              >
                                <el-option
                                  v-for="ite in sizeList"
                                  :key="ite.value"
                                  :label="ite.label"
                                  :value="ite.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="item.title_color4"
                                :predefine="predefineColors"
                              ></el-color-picker>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="main_btn">
                      <div style="margin:20px 0;width:100%;margin-right:20px">
                        <!-- 导出按钮 -->
                        <el-button
                          type="primary"
                          size="small"
                          @click="saveAsImg('baocanvas')"
                        >合 成</el-button
                        >
                        <el-button
                          type="primary"
                          size="small"
                          @mousedown.native="handleOk2('baoimg')"
                          @click="handleOk('baoimg')"
                        >复制</el-button
                        >
                        <a
                          download="营销图"
                          :href="saveurl"
                          style="width:100%;height:100%;margin-left:10px"
                        >
                          <el-button type="primary" size="small">
                            保存
                          </el-button>
                        </a>
                      </div>
                      <div>
                        <!-- style="width: 150px; height: 300px" -->
                        <el-image
                          id="baoimg"
                          v-if="dourl !== ''"
                          :src="dourl"
                          fit="cover"
                        ></el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { uploadBase } from '@/api/homepage.js' //base64上传
import html2canvas from 'html2canvas'
export default {
  name: 'Widgepic',
  data() {
    return {
      //长图显示
      isshow: '1',
      //价格标签显示
      priceshow: false,
      //长标签显示
      longshow: false,
      //圆标签显示
      roundshow: false,
      //尺寸选择
      sizeradio: '1',
      stripradio: '0',
      priceradio: '0',
      pricebgList: [
        require('@/assets/imgs/widge/price1.png'),
        require('@/assets/imgs/widge/price2.png'),
        require('@/assets/imgs/widge/price3.png'),
        require('@/assets/imgs/widge/price4.png'),
        require('@/assets/imgs/widge/price5.png'),
        require('@/assets/imgs/widge/price6.png'),
        require('@/assets/imgs/widge/price7.png'),
        require('@/assets/imgs/widge/price8.png'),
        require('@/assets/imgs/widge/price9.png')
      ],
      stripbgList: [
        require('@/assets/imgs/widge/long1.png'),
        require('@/assets/imgs/widge/long2.png'),
        require('@/assets/imgs/widge/long3.png'),
        require('@/assets/imgs/widge/long4.png'),
        require('@/assets/imgs/widge/long5.png'),
        require('@/assets/imgs/widge/long6.png'),
        require('@/assets/imgs/widge/long7.png'),
        require('@/assets/imgs/widge/long8.png')
      ],
      roundbgList: [
        require('@/assets/imgs/widge/round1.png'),
        require('@/assets/imgs/widge/round2.png'),
        require('@/assets/imgs/widge/round3.png'),
        require('@/assets/imgs/widge/round4.png'),
        require('@/assets/imgs/widge/round5.png'),
        require('@/assets/imgs/widge/round6.png'),
        require('@/assets/imgs/widge/round7.png'),
        require('@/assets/imgs/widge/round8.png'),
        require('@/assets/imgs/widge/round9.png'),
        require('@/assets/imgs/widge/round10.png'),
        require('@/assets/imgs/widge/round11.png'),
        require('@/assets/imgs/widge/round12.png')
      ],
      baoboxheight: 1030,
      miaoboxheight: 800,
      // 全局上传地址
      uploadaction: 'https://jfk-api.letuilm.com/api/upload_img',
      // 右边主图拖动条件
      isdown: false,
      flag: false,
      // 右侧图地址暂存
      moveimg: '',
      // 右侧营销图列表
      yximgList: [
        // "http://img.letuilm.com/2020/06/1d9b042020061717382128336.jpeg",
      ],
      // 右侧主图列表
      mainimgList: [],
      saveurl: '',
      goodsurl: '',
      dourl: '',
      // 三大卡片高度
      cardheight: 680,
      // 爆品汇总固定图片
      baoicon: require('@/assets/imgs/widge/baotop.png'),
      hot: require('@/assets/imgs/widge/hot.png'),
      // 爆款渲染列表
      baoList: [
        {
          font: [
            {
              text1: '文字三',
              title1: '【迪奥】',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '香水四件套',
              title_color2: '#ffffff',
              title_size2: '14',

              text3: '文字五',
              title3: '6666',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '8月22日',
              title_color4: '#ffffff',
              title_size4: '14'
            }
          ],
          imgurl: '',
          status: 1
        },
        {
          font: [
            {
              text1: '文字三',
              title1: '【迪奥】',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '香水四件套',
              title_color2: '#ffffff',
              title_size2: '14',

              text3: '文字五',
              title3: '6666',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '8月22日',
              title_color4: '#ffffff',
              title_size4: '14'
            }
          ],
          imgurl: '',
          status: 1
        },
        {
          font: [
            {
              text1: '文字三',
              title1: '【迪奥】',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '香水四件套',
              title_color2: '#ffffff',
              title_size2: '14',

              text3: '文字五',
              title3: '6666',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '8月22日',
              title_color4: '#ffffff',
              title_size4: '14'
            }
          ],
          imgurl: '',
          status: 1
        }
      ],
      baoradio: 0, //爆款列表单选
      // 爆款风格
      baostyle: 1,
      baostyleList: [
        {
          value: 1,
          label: '缤纷_单列1'
        },
        {
          value: 2,
          label: '缤纷_单列2'
        },
        {
          value: 3,
          label: '缤纷_单列3'
        }
      ],
      miaoradio: 0, //秒杀列表单选
      // 好单预告列表
      miaoList: [
        {
          font: [
            {
              text1: '文字三',
              title1: '三只松鼠',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '50.0',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '10.0',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '3月14号 上午10:00',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          isblue: true
        },
        {
          font: [
            {
              text1: '文字三',
              title1: '三只松鼠',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '50.0',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '10.0',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '3月14号 上午10:00',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          isblue: false
        }
      ],
      // 好单预告轮播图
      miaoimglist: [
        { url: require('@/assets/imgs/widge/baobgblue.png') },
        { url: require('@/assets/imgs/widge/baobgorange.png') },
        { url: require('@/assets/imgs/widge/baobgred.png') }
      ],
      // 边框颜色
      bordercolor: '#FF0000',
      // 小标签
      smallLabel: 1,
      // iconfont颜色
      icfontcolor: '#FF0000',
      // 定位盒子top
      potop: '0px',
      poleft: '0px',
      // 文11
      title11: '稻香村月饼礼盒',
      title_color11: '#ffffff',
      title_size11: '33',
      title_famiy11: '微软雅黑',
      // 文字10
      title10: '企业送礼10饼6味共680g',
      title_color10: '#ffffff',
      title_size10: '16',
      title_famiy10: '微软雅黑',
      // 文字9
      title9: '50.0',
      title_color9: '#ffffff',
      title_size9: '30',
      title_famiy9: '微软雅黑',
      // 文字8
      title8: '京东价111元',
      title_color8: '#ffffff',
      title_size8: '12',
      title_famiy8: '微软雅黑',
      // 文字7
      title7: '3月14号 上午10:00',
      title_color7: '#ffffff',
      title_size7: '16',
      title_famiy7: '微软雅黑',
      // 文字6
      title6: '3月14号 上午10:00',
      title_color6: '#ffffff',
      title_size6: '16',
      title_famiy6: '微软雅黑',
      // 文字5
      title5: '10.0',
      title_color5: '#ffffff',
      title_size5: '16',
      title_famiy5: '微软雅黑',
      // 文字4
      title4: '三只松鼠',
      title_color4: '#ffffff',
      title_size4: '14',
      title_famiy4: '微软雅黑',
      // 文字3
      title3: '29.9',
      title_color3: '#FF0000',
      title_size3: '20',
      title_famiy3: '微软雅黑',
      title_border3: '1px solid red',
      // 文字2
      title2: '明日预告',
      title_color2: '#FF0000',
      title_size2: '14',
      title_famiy2: '微软雅黑',
      // 文字1
      title1: '精选必抢',
      title_color1: '#ffffff',
      title_size1: '32',
      title_famiy1: '微软雅黑',
      //营销推广图背景
      graphBgImg: '',

      graphradio: 1, //中间标签切换展示控制
      leftshow: 1, //中间分类展示控制
      uploadradio: 1, //左边上传布局控制
      // 上传图片地址
      imgone: '',
      imgtwo: '',
      imgthree: '',
      imgfour: '',
      imgfive: '',
      // 字体大小下拉框 12-32
      sizeList: [
        {
          value: '12',
          label: '12'
        },
        {
          value: '14',
          label: '14'
        },
        {
          value: '16',
          label: '16'
        },
        {
          value: '18',
          label: '18'
        },
        {
          value: '20',
          label: '20'
        },
        {
          value: '22',
          label: '22'
        },
        {
          value: '24',
          label: '24'
        },
        {
          value: '26',
          label: '26'
        },
        {
          value: '28',
          label: '28'
        },
        {
          value: '30',
          label: '30'
        },
        {
          value: '32',
          label: '32'
        }
      ],
      // 字体大小下拉框16-48
      sizeList2: [
        {
          value: '16',
          label: '16'
        },
        {
          value: '18',
          label: '18'
        },
        {
          value: '20',
          label: '20'
        },
        {
          value: '22',
          label: '22'
        },
        {
          value: '24',
          label: '24'
        },
        {
          value: '26',
          label: '26'
        },
        {
          value: '28',
          label: '28'
        },
        {
          value: '30',
          label: '30'
        },
        {
          value: '32',
          label: '32'
        },
        {
          value: '34',
          label: '34'
        },
        {
          value: '36',
          label: '36'
        },
        {
          value: '38',
          label: '38'
        },
        {
          value: '40',
          label: '40'
        },
        {
          value: '42',
          label: '42'
        },
        {
          value: '44',
          label: '44'
        },
        {
          value: '46',
          label: '46'
        },
        {
          value: '48',
          label: '48'
        }
      ],
      // 字体选择
      famiyList: [
        {
          value: '宋体',
          label: '宋体'
        },
        {
          value: 'Arial',
          label: 'Arial'
        },
        {
          value: '黑体',
          label: '黑体'
        },
        {
          value: '微软雅黑',
          label: '微软雅黑'
        },
        {
          value: '微软正黑体',
          label: '微软正黑体'
        },
        {
          value: '楷体',
          label: '楷体'
        },
        {
          value: '新宋体',
          label: '新宋体'
        },
        {
          value: '仿宋',
          label: '仿宋'
        },
        {
          value: 'Times New Roman',
          label: 'Times New Roman'
        },
        {
          value: 'Helvetica',
          label: 'Helvetica'
        },
        {
          value: 'Verdana',
          label: 'Verdana'
        },
        {
          value: 'Tahoma',
          label: 'Tahoma'
        }
      ],
      // 预设颜色
      predefineColors: [
        '#FFFFFF',
        '#FF4500',
        '#FF8C00',
        '#FFD700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#FF7800'
      ],
      // 主题风格
      stylechooseList: [
        {
          value: 1,
          label: '紫橙缤纷'
        },
        {
          value: 2,
          label: '橙紫缤纷'
        },
        {
          value: 3,
          label: '蓝色_单列'
        },
        {
          value: 4,
          label: '橙色_单列'
        }
      ],
      stylechoose: 1,
      // 排版风格
      composingstyleList: [
        {
          value: 1,
          label: '单行标题'
        },
        {
          value: 2,
          label: '多行标题'
        }
      ],
      composingstyle: 1
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    //尺寸切换
    sizechange(val) {
      console.log('sizeradio', val, this.sizeradio)
    },
    //价格标签切换
    pricechange(val) {
      console.log('priceradio', val)
      if (val == 0) {
        this.title_color8 = '#ffffff'
        this.title_color9 = '#D70D35'
        this.title_color10 = '#ffffff'
        this.title_color11 = '#ffffff'
      }
      if (val == 1 || val == 6) {
        this.title_color8 = '#ffffff'
        this.title_color9 = '#ffffff'
        this.title_color10 = '#ffffff'
        this.title_color11 = '#ffffff'
      }
      if (val == 2) {
        this.title_color8 = '#ffffff'
        this.title_color9 = '#ffffff'
        this.title_color10 = 'black'
        this.title_color11 = '#ffffff'
      }
      if (val == 3) {
        this.title_color8 = '#ffffff'
        this.title_color9 = '#D70D35'
        this.title_color10 = '#D70D35'
        this.title_color11 = '#ffffff'
      }
      if (val == 4) {
        this.title_color8 = '#ffffff'
        this.title_color9 = '#1E635E'
        this.title_color10 = '#1E635E'
        this.title_color11 = '#ffffff'
      }
      if (val == 5) {
        this.title_color8 = '#ffffff'
        this.title_color9 = '#D70D35'
        this.title_color10 = '#ffffff'
        this.title_color11 = '#ffffff'
      }
      if (val == 7) {
        this.title_color8 = '#0371cd'
        this.title_color9 = '#ffffff'
        this.title_color10 = '#0371cd'
        this.title_color11 = '#ffffff'
      }
      if (val == 8) {
        this.title_color8 = '#ffffffb3'
        this.title_color9 = '#ffffff'
        this.title_color10 = '#ffffff'
        this.title_color11 = '#ffffff'
      }
    },
    //长标签切换
    stripchange(val) {
      console.log('strpradio', val)
    },
    //圆标签切换
    smallchange(val) {
      console.log('smallLabel', val, this.smallLabel)
      if (val == 8) {
        this.title_color1 = '#fc4b4b'
        this.title_color2 = '#fc4b4b'
        this.title_color3 = '#fc4b4b'
      } else if (val == 9) {
        this.title_color1 = '#563cf6'
        this.title_color2 = '#563cf6'
        this.title_color3 = '#563cf6'
      } else if (val == 11) {
        this.title_color1 = '#813f25'
        this.title_color2 = '#813f25'
        this.title_color3 = '#813f25'
      } else {
        this.title_color1 = '#ffffff'
        this.title_color2 = '#ffffff'
        this.title_color3 = '#ffffff'
      }
    },
    // 预复制
    handleOk2(val) {
      // this.$nextTick(function() {
      const selection = window.getSelection()
      const range = document.createRange()
      // console.log(document.getElementById(val));
      range.selectNode(document.getElementById(val)) //传入dom
      selection.addRange(range)
      document.execCommand('copy')
      selection.removeAllRanges()
      // });
    },
    // 复制
    handleOk(val) {
      console.log(val)
      if (this.dourl == '') {
        this.$message.info('请先合成图片再复制!')
      } else {
        this.$nextTick(function() {
          const selection = window.getSelection()
          const range = document.createRange()
          console.log(document.getElementById(val))
          range.selectNode(document.getElementById(val)) //传入dom
          selection.addRange(range)
          document.execCommand('copy')
          this.$message.success('复制成功')
          selection.removeAllRanges()
        })
      }
    },
    // 爆品汇总删除最后一个
    colsebaolist() {
      this.baoList.pop()
      this.baoradio = 0
      // console.log("this.baoList", this.baoList);
      var canvas_box3 = document.querySelector('.canvas_box3')
      if (this.cardheight > 660) {
        this.cardheight = canvas_box3.offsetHeight - 190
        console.log(this.cardheight)
      }
      if (this.cardheight < 630) {
        this.cardheight = 650
        console.log(this.cardheight)
      }
      this.baoboxheight = this.cardheight
    },
    // 秒杀预告删除
    colsemiaolist() {
      this.miaoList.pop()
      this.miaoradio = 0
      // console.log("close_miaoList", this.miaoList);
      var canvas_box2 = document.querySelector('.canvas_box2')
      if (this.cardheight > 615) {
        this.cardheight = canvas_box2.offsetHeight - 190
        console.log(this.cardheight)
      }
      if (this.cardheight <= 615) {
        this.cardheight = 615
        console.log(this.cardheight)
      }
      this.miaoboxheight = this.cardheight
    },
    // 关闭图片的显示
    closeimg(val, index) {
      window.event.preventDefault()
      if (val == 1) {
        this.imgone = ''
      }
      if (val == 2) {
        this.imgtwo = ''
      }
      if (val == 3) {
        this.imgthree = ''
      }
      if (val == 4) {
        this.imgfour = ''
      }
      if (val == 5) {
        this.imgfive = ''
      }
      if (val == 6) {
        for (let i = 0; i < this.miaoList.length; i++) {
          if (i == index) {
            this.miaoList[i].imgurl = ''
          }
        }
      }
      if (val == 7) {
        for (let i = 0; i < this.baoList.length; i++) {
          if (i == index) {
            this.baoList[i].imgurl = ''
          }
        }
      }
    },
    // 营销推广图标签的显示
    showtabsdiv() {
      this.$refs.showtabs.style.display = 'block'
    },
    // 营销推广图标签的隐藏
    closediv(val) {
      document.getElementById(val).style.display = 'none'
      // this.$refs.showtabs.style.display = 'none'
    },
    // 爆品汇总左侧列表切换
    baoradiochange(val) {
      console.log('baoradio', val)
    },
    // 秒杀左侧列表切换
    miaoradiochange(val) {
      console.log('miaoradio', val)
    },
    // 爆款汇总增加
    addbaolist() {
      var status1 = {
        font: [
          {
            text1: '文字三',
            title1: '【迪奥】',
            title_color1: '#ffffff',
            title_size1: '18',

            text2: '文字四',
            title2: '香水四件套',
            title_color2: '#ffffff',
            title_size2: '14',

            text3: '文字五',
            title3: '6666',
            title_color3: '#ffffff',
            title_size3: '16',

            text4: '文字六',
            title4: '8月22日',
            title_color4: '#ffffff',
            title_size4: '14'
          }
        ],
        imgurl: '',
        status: 1
      }
      this.baoList.push(status1)
      var canvas_box3 = document.querySelector('.canvas_box3')
      // console.log("1+", this.cardheight);
      if (this.cardheight < 1224) {
        if (canvas_box3.offsetHeight < 619) {
          this.cardheight = 700
        } else {
          this.cardheight = canvas_box3.offsetHeight + 172
        }
        console.log('2+', this.cardheight)
      }
      this.baoboxheight = this.cardheight
    },
    // 秒杀预告增加
    doaddlist() {
      var obj1 = {
        font: [
          {
            text1: '文字三',
            title1: '三只松鼠',
            title_color1: '#ffffff',
            title_size1: '18',

            text2: '文字四',
            title2: '50.0',
            title_color2: '#ffffff',
            title_size2: '16',

            text3: '文字五',
            title3: '10.0',
            title_color3: '#ffffff',
            title_size3: '16',

            text4: '文字六',
            title4: '3月14号 上午10:00',
            title_color4: '#ffffff',
            title_size4: '16'
          }
        ],
        imgurl: '',
        isblue: true
      }
      var obj2 = {
        font: [
          {
            text1: '文字三',
            title1: '三只松鼠',
            title_color1: '#ffffff',
            title_size1: '18',

            text2: '文字四',
            title2: '50.0',
            title_color2: '#ffffff',
            title_size2: '16',

            text3: '文字五',
            title3: '10.0',
            title_color3: '#ffffff',
            title_size3: '16',

            text4: '文字六',
            title4: '3月14号 上午10:00',
            title_color4: '#ffffff',
            title_size4: '16'
          }
        ],
        imgurl: '',
        isblue: false
      }
      if (this.stylechoose == 1) {
        if (this.miaoList.length % 2 == 0) {
          this.miaoList.push(obj1)
        } else {
          this.miaoList.push(obj2)
        }
      }
      if (this.stylechoose == 2) {
        this.miaoList.push(obj1)
      }
      if (this.stylechoose == 3) {
        this.miaoList.push(obj2)
      }
      // console.log("this.miaoList", this.miaoList);
      var canvas_box2 = document.querySelector('.canvas_box2')
      if (this.cardheight < 1224) {
        if (canvas_box2.offsetHeight < 615) {
          this.cardheight = 625
        } else {
          this.cardheight = canvas_box2.offsetHeight + 210
          console.log(this.cardheight)
        }
      }
      this.miaoboxheight = this.cardheight
    },
    // 爆款主题风格切换
    baostylechange(val) {
      console.log('baostyle', val)
      if (val == 1) {
        for (let i = 0; i < this.baoList.length; i++) {
          if (i % 4 == 0) {
            this.baoList[i].status = 1
          } else if (i % 4 == 1) {
            this.baoList[i].status = 2
          } else if (i % 4 == 2) {
            this.baoList[i].status = 3
          } else if (i % 4 == 3) {
            this.baoList[i].status = 4
          }
        }
      }
      if (val == 2) {
        for (let i = 0; i < this.baoList.length; i++) {
          if (i % 2 == 0) {
            this.baoList[i].status = 1
          } else {
            this.baoList[i].status = 3
          }
        }
      }
      if (val == 3) {
        for (let i = 0; i < this.baoList.length; i++) {
          if (i % 2 == 0) {
            this.baoList[i].status = 2
          } else {
            this.baoList[i].status = 4
          }
        }
      }
    },
    // 秒杀主题风格切换
    stylechoosechange(val) {
      console.log('stylechoose', val)
      if (val == 1) {
        for (let i = 0; i < this.miaoList.length; i++) {
          if (i % 2 == 0) {
            this.miaoList[i].isblue = true
          } else {
            this.miaoList[i].isblue = false
          }
        }
      }
      if (val == 2) {
        for (let i = 0; i < this.miaoList.length; i++) {
          if (i % 2 == 0) {
            this.miaoList[i].isblue = false
          } else {
            this.miaoList[i].isblue = true
          }
        }
      }
      if (val == 3) {
        for (let i = 0; i < this.miaoList.length; i++) {
          this.miaoList[i].isblue = true
        }
      }
      if (val == 4) {
        for (let i = 0; i < this.miaoList.length; i++) {
          this.miaoList[i].isblue = false
        }
      }
    },
    // 排版风格切换
    composingstylechange(val) {
      console.log('composingstyle', val)
      if (val == 1) {
        for (let i = 0; i < this.miaoList.length; i++) {
          this.miaoList[i].font[0].title_size2 = '16'
        }
      }
      if (val == 2) {
        for (let i = 0; i < this.miaoList.length; i++) {
          this.miaoList[i].font[0].title_size2 = '14'
        }
      }
    },
    // 风格切换事件
    stylechange(val) {
      console.log('风格切换-styleradio', val)
    },
    // 移动盒子事件按下 圆标签
    movedown(e, val) {
      console.log('按下', e, val)
      var father = this.$refs.mycanvas
      // var son = this.$refs.showtabs
      var son = document.getElementById(val)
      son.style.zIndex = son.style.zIndex + 2
      // console.log(document.getElementById(val))
      var changetop = father.offsetHeight - son.offsetHeight
      var changeleft = father.offsetWidth - son.offsetWidth
      // const showtabs = this.$refs.showtabs //获取目标元素
      const showtabs = document.getElementById(val) //获取目标元素
      // console.log("pageY", this.father.pageY);
      // console.log("pageX", this.father.pageX);
      //算出鼠标相对元素的位置
      const disX = e.clientX - showtabs.offsetLeft
      const disY = e.clientY - showtabs.offsetTop
      document.onmousemove = e => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        const left = e.clientX - disX
        const top = e.clientY - disY
        console.log('top', top)
        // console.log("left", left);
        if (top >= 0 && top <= changetop) {
          showtabs.style.top = top + 'px'
        }
        if (left >= 0 && left <= changeleft) {
          showtabs.style.left = left + 'px'
        }
        //绑定元素位置到positionX和positionY上面
        // this.positionX = top;
        // this.positionY = left;

        //移动当前元素
      }
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    // 抬起
    moveup(e) {
      console.log('抬起', e)
    },
    // 标签切换控制
    graphchange(val) {
      console.log('标签切换-graphradio', val)
      this.$refs.showtabs.style.display = 'block'
      this.styleradio = 1
      this.imgfive = ''
      const showtabs = this.$refs.showtabs //获取目标元素
    },
    // 左边布局切换
    uplradchange(val) {
      console.log('上传布局-uploadradio', val)
      this.imgone = ''
      this.imgtwo = ''
      this.imgthree = ''
      this.imgfour = ''
      this.imgfive = ''
      this.$refs.showtabs.style.display = 'none'
      this.$refs.showlong.style.display = 'none'
      this.$refs.showprice.style.display = 'none'
    },
    // 中间顶部分类控制
    setchange(val) {
      console.log('中间顶部分类-leftshow', val)
      this.dourl = ''
      this.saveurl = ''
      const showtabs = this.$refs.showtabs //圆标签
      const showlongs = this.$refs.showlong //长标签
      const showprice = this.$refs.showprice //价格标签
      if (val == 2) {
        showtabs.style.display = 'block'
        this.roundshow = true
        this.cardheight = this.miaoboxheight
        this.title1 = '折扣价'
        this.title_color1 = '#ffffff'
        this.title_size1 = '16'
        this.title_famiy1 = '微软雅黑'

        this.title2 = '速度抢'
        this.title_color2 = '#ffffff'
        this.title_size2 = '12'
        this.title_famiy2 = '微软雅黑'

        this.title3 = '比促销价更优惠'
        this.title_color3 = '#ffffff'
        this.title_size3 = '12'
        this.title_famiy3 = '微软雅黑'

        this.title4 = '100'
        this.title_color4 = '#ffffff'
        this.title_size4 = '14'
        this.title_famiy4 = '微软雅黑'
      }
      if (val == 3) {
        showlongs.style.display = 'block'
        showlongs.style.top =
          this.uploadradio == 1 || this.uploadradio == 4
            ? '329px'
            : this.uploadradio == 2
            ? '514px'
            : this.uploadradio == 3
            ? '205px'
            : this.uploadradio == 5
            ? '403px'
            : '267px'
        this.longshow = true
        this.cardheight = 600
        this.title5 = '￥19.9'
        this.title_color5 = '#ffffff'
        this.title_size5 = '18'
        this.title_famiy5 = '微软雅黑'

        this.title6 = '京东好货'
        this.title_color6 = '#ffffff'
        this.title_size6 = '18'
        this.title_famiy6 = '微软雅黑'

        this.title7 = '立减20元'
        this.title_color7 = '#ffffff'
        this.title_size7 = '18'
        this.title_famiy7 = '微软雅黑'
      }
      if (val == 4) {
        showprice.style.display = 'block'
        showprice.style.top = '0'
        showprice.style.left = '0'
        this.priceshow = true
        this.cardheight = 700

        this.title8 = '京东价111元'
        this.title_color8 = '#ffffff'
        this.title_size8 = '12'
        this.title_famiy8 = '微软雅黑'

        this.title9 = '50.0'
        this.title_color9 = '#D70D35'
        this.title_size9 = '30'
        this.title_famiy9 = '微软雅黑'

        this.title10 = '企业送礼10饼6味共680g'
        this.title_color10 = '#ffffff'
        this.title_size10 = '16'
        this.title_famiy10 = '微软雅黑'

        this.title11 = '稻香村月饼礼盒'
        this.title_color11 = '#ffffff'
        this.title_size11 = '33'
        this.title_famiy11 = '微软雅黑'
      }
      if (val == 5) {
        this.title_size1 = '32'
        this.title_size2 = '14'
        this.title_color2 = '#ffffff'
      }
    },
    // 上传成功7---爆品汇总上传
    uploadSuccess7(res, file, fileList, val) {
      console.log('上传7', res, file, fileList, val)
      for (let i = 0; i < this.baoList.length; i++) {
        if (i == val) {
          this.baoList[i].imgurl = `http://` + res.data.url
          break
        }
      }
      // this.imgone = "http://" + fileList[0].response.data.url;
      // console.log(this.imgone);
    },
    // 上传成功6---秒杀预告上传
    uploadSuccess6(res, file, fileList, val) {
      console.log('上传6', res, file, fileList, val)
      // console.log("返回fileList", fileList);
      for (let i = 0; i < this.miaoList.length; i++) {
        if (i == val) {
          this.miaoList[i].imgurl = `http://` + res.data.url
          break
        }
      }
      // this.imgone = "http://" + fileList[0].response.data.url;
      // console.log(this.imgone);
    },
    // 上传成功1
    uploadSuccess1(res, file, fileList) {
      // console.log("上传1", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgone = 'http://' + fileList[0].response.data.url
      // console.log(this.imgone);
    },
    // 上传成功2
    uploadSuccess2(res, file, fileList) {
      // console.log("上传2", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgtwo = 'http://' + fileList[0].response.data.url
      // console.log(this.imgtwo);
    },
    // 上传成功3
    uploadSuccess3(res, file, fileList) {
      // console.log("上传3", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgthree = 'http://' + fileList[0].response.data.url
      // console.log(this.imgthree);
    },
    // 上传成功4
    uploadSuccess4(res, file, fileList) {
      // console.log("上传4", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgfour = 'http://' + fileList[0].response.data.url
      // console.log(this.imgfour);
    },
    // 上传成功5=>自定义上传
    uploadSuccess5(res, file, fileList) {
      // console.log("上传4", res, file.raw);
      // console.log("返回fileList", fileList);
      this.imgfive = 'http://' + fileList[0].response.data.url
      // console.log(this.imgfour);
    },
    // 上传失败
    uploadError(err, file, fileList) {
      console.log('上传失败信息', err, file, fileList)
      this.$message.error(fileList)
    },
    // 限制上传参数
    beforeAvatarUpload(file) {
      console.log(file.type)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG,PNG格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    // 营销推广导出为图片
    saveYXImg(val) {
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      // 先获取你要转换为img的dom节点
      var node = document.getElementById(val)
      // console.log("node", node);
      var width = node.offsetWidth //dom宽
      var height = node.offsetHeight //dom高
      var scale = 2 //放大倍数
      //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
      html2canvas(node, {
        width: width,
        heigth: height,
        backgroundColor: '#ffffff', //背景是否透明 为null 透明
        dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
        scale: scale,
        X: 0,
        Y: 0,
        scrollX: -3, //如果左边多个白边 设置该偏移
        scrollY: 0,
        useCORS: true, //是否使用CORS从服务器加载图像 !!!
        allowTaint: true //是否允许跨域图像污染画布  !!!
      }).then(canvas => {
        // console.log("canvas", canvas);
        var url = canvas.toDataURL() //这里上面不设值cors会报错
        var a = document.createElement('a')
        a.download = '营销图' //设置图片名称
        var event = new MouseEvent('click')
        a.href = url
        a.dispatchEvent(event) //触发a的单击事件
      })
    },
    // 秒杀/爆品 合成为图片
    saveAsImg(val) {
      const loading = this.$loading({
        lock: true,
        text: '合成中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      // 先获取你要转换为img的dom节点
      var node = document.getElementById(val)
      // console.log("node", node);
      var width = node.offsetWidth //dom宽
      var height = node.offsetHeight //dom高
      var scale = 2 //放大倍数
      //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
      html2canvas(node, {
        width: width,
        heigth: height,
        backgroundColor: '#ffffff', //背景是否透明 为null 透明
        dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
        scale: scale,
        X: 0,
        Y: 0,
        scrollX: -3, //如果左边多个白边 设置该偏移
        scrollY: 0,
        useCORS: true, //是否使用CORS从服务器加载图像 !!!
        allowTaint: true //是否允许跨域图像污染画布  !!!
      }).then(canvas => {
        // console.log("canvas", canvas);
        var url = canvas.toDataURL() //这里上面不设值cors会报错

        // var a = document.createElement("a");
        // a.download = "营销图"; //设置图片名称
        // var event = new MouseEvent("click");
        // a.href = url;
        // console.log("a", a);
        // a.dispatchEvent(event); //触发a的单击事件

        this.saveurl = url
        // console.log("url", url);
        uploadBase({
          file: url
        })
          .then(res => {
            if (res.code == 200) {
              loading.close()
              console.log('base上传返回', res.data.url)
              this.dourl = 'http://' + res.data.url
              this.$message.success('合成成功!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.set_box {
  width: 450px;
  margin: 0 auto;
}
.display {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // position: relative;
}
.display2 {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.canvas_box2 {
  width: 370px;
  margin: 0 auto;
  margin-top: 10px;
  #miaocanvas {
    .position_box {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      top: 46px;
      left: 0;
      .show_title {
        white-space: nowrap;
      }
    }
    .miaolist::v-deep {
      .el-radio__input {
        display: none;
      }
      .el-radio {
        width: 100%;
        margin-right: 0;
      }
      .el-radio__label {
        padding-left: 0px;
      }
      .miao_main {
        width: 370px;
        border-radius: 10px;
        margin-top: 10px;
        .miao_img {
          position: relative;
          box-sizing: border-box;
          border-radius: 10px;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .miao_uploadone {
            // width: 170px;
            // padding-top: 10px;
            .el-upload {
              width: 139px;
              height: 139px;
            }
          }
          .rigtitle {
            height: 100%;
            margin-left: 10px;
            .toptie {
              width: 200px;
              overflow: hidden;
              height: 100%;
              .show_title {
                width: 100%;
                white-space: nowrap;
                text-align: left;
              }
            }
          }
          .bg_num {
            width: 80px;
            height: 139px;
            text-align: center;
            position: absolute;
            margin-left: 280px;
            color: rgba(255, 255, 255, 0.8);
            z-index: 1;
            line-height: 139px;
            font-size: 150px;
          }
        }
      }
      .miao_main:hover {
        .el-icon-close {
          display: block;
        }
      }
    }
  }
}
.canvas_box3 {
  width: 370px;
  margin: 0 auto;
  margin-top: 10px;
  .top_bg {
    border-radius: 10px;
    height: 170px;
    position: relative;
    background: url('~@/assets/imgs/widge/baobg.png') no-repeat center;
    background-size: 100%;
    .position_box {
      position: absolute;
      width: 100%;
      top: 28px;
      left: 0;
    }
  }
  .miaolist::v-deep {
    .el-radio__input {
      display: none;
    }
    .el-radio {
      width: 100%;
      margin-right: 0;
    }
    .el-radio__label {
      padding-left: 0px;
    }
    .miao_main {
      width: 370px;
      border-radius: 10px;
      margin-top: 10px;
      .miao_img {
        position: relative;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .miao_uploadone {
          // width: 170px;
          // padding-top: 10px;
          .el-upload {
            width: 139px;
            height: 139px;
          }
        }
        .rigtitle {
          height: 100%;
          margin-left: 10px;
          .toptie {
            width: 180px;
            overflow: hidden;
            margin-left: 10px;
            height: 100%;
            text-align: left;
            .show_title {
              // width: 100%;
              white-space: nowrap;
            }
            .issue_box {
              width: 176px;
              height: 26px;
              z-index: 5;
              position: absolute;
              bottom: 8px;
              font-size: 12px;
              line-height: 26px;
              border-radius: 13px;
              background: #ffbc00;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
    .miao_main:hover {
      .el-icon-close {
        display: block;
      }
    }
  }
}
.widgepic {
  width: 100%;
  background-color: #f6f6f6;
  .widgepic_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .main_box {
      width: 100%;
      overflow-y: auto;
      padding-bottom: 10px;
      //   height: 675px;
      .show_top1 {
        width: 100%;
        margin-top: 10px;
        .uploadradio::v-deep {
          .el-radio-group {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
          }
          .el-radio__inner {
            display: none;
          }
          .el-radio {
            margin-right: 20px;
          }
          .el-radio__label {
            display: inline-block;
          }
          .templatebox {
            width: 125px;
            height: 125px;
            padding: 10px;
            background: #f0f0f0;
            margin-bottom: 10px;
            span {
              display: inline-block;
            }
          }
          .templatebox:hover {
            background: #c7c7c7;
          }
          .img1 {
            background: #adf;
          }
          .img2 {
            background: #cfc;
          }
          .img3 {
            background: #fcc;
          }
          .img4 {
            background: #cff;
          }
          .img5 {
            background: #ccf;
          }
          .temp1 {
            .img1 {
              width: 105px;
              height: 105px;
            }
          }
          .temp2 {
            .img1 {
              display: block;
              width: 70px;
              height: 70px;
              margin: 0 auto;
            }
            .img2 {
              width: 35px;
              height: 35px;
            }
            .img3 {
              width: 35px;
              height: 35px;
            }
          }
          .temp3 {
            display: flex;
            justify-content: center;
            align-items: center;
            .img1 {
              width: 70px;
              height: 70px;
            }
            .flexin {
              display: inline-block;
            }
            .img2 {
              display: block;
              width: 35px;
              height: 35px;
            }
            .img3 {
              display: block;
              width: 35px;
              height: 35px;
            }
          }
          .temp4 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            span {
              width: 52px;
              height: 52px;
            }
          }
          .temp5 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            div:nth-child(1) {
              display: inline-block;
              width: 45px;
              height: 90px;
            }
            div:nth-child(2) {
              width: 30px;
              height: 90px;
              display: inline-block;
            }
            .img1 {
              width: 45px;
              height: 45px;
              float: left;
            }
            .img2 {
              width: 30px;
              height: 30px;
              float: left;
            }
            .img3 {
              width: 30px;
              height: 30px;
              float: left;
            }
            .img4 {
              width: 45px;
              height: 45px;
              float: left;
            }
            .img5 {
              width: 30px;
              height: 30px;
              float: left;
            }
          }
          .temp6 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            div {
              width: 90px;
              text-align: center;
              margin: 0 auto;
            }
            .img1 {
              width: 45px;
              height: 45px;
              float: left;
            }
            .img2 {
              width: 45px;
              height: 45px;
              float: left;
            }
            .img3 {
              width: 30px;
              height: 30px;
              float: left;
            }
            .img4 {
              width: 30px;
              height: 30px;
              float: left;
            }
            .img5 {
              width: 30px;
              height: 30px;
              float: left;
            }
          }
          .is-checked {
            .templatebox {
              background: #c7c7c7;
            }
          }
        }
      }
      .canvas_box {
        width: 370px;
        // height: 485px;
        margin: 0 auto;
        margin-top: 10px;
        .mycanvas {
          position: relative;

          .uploadone::v-deep {
            position: relative;
            width: 370px;
            height: 370px;
            background-color: #f6f6f6;
            box-sizing: border-box;
            // border: 1px solid red;

            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadone:hover {
            background-color: #cccccc;
          }
          .uploadtwo::v-deep {
            width: 185px;
            height: 185px;
            box-sizing: border-box;
            // border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadtwo:hover {
            background-color: #cccccc;
          }
          .uploadthree::v-deep {
            width: 185px;
            height: 185px;
            box-sizing: border-box;
            // border: 1px solid red;
            // background-color: #f6f6f6;
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadthree:hover {
            background-color: #cccccc;
          }
          .uploadfour::v-deep {
            width: 185px;
            height: 185px;
            box-sizing: border-box;
            // border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadfour:hover {
            background-color: #cccccc;
          }
          .uploadfour::v-deep {
            width: 185px;
            height: 185px;
            box-sizing: border-box;
            // border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadfour:hover {
            background-color: #cccccc;
          }
          .uploadradio1 {
            .img_box::v-deep {
              height: 100%;
              position: relative;
              .el-icon-close {
                display: none;
                cursor: pointer;
                z-index: 200;
                position: absolute;
                top: 2px;
                right: 2px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                background: #fff;
                font-weight: 600;
                font-size: 20px;
                font-style: normal;
                color: #5680fe;
                text-align: center;
                border-radius: 15px;
                transition: all linear 0.5s;
              }
              .el-icon-close:hover {
                background: #607bfe;
                color: #fff;
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
              }
            }
            .img_box:hover {
              .el-icon-close {
                display: block;
              }
            }
          }
          .up3 {
            display: flex;
            width: 370px;
            height: 246px;
            .uploadone {
              display: inline-block;
              width: 246px;
              height: 246px;
            }
            .uploadtwo {
              width: 123px;
              height: 123px;
            }
          }
          .up5 {
            display: flex;
            align-items: flex-start;
            height: 444px;
            .up5_left {
              width: 222px;
              display: inline-block;
            }
            .up5_right {
              width: 148px;
              display: inline-block;
            }
            .uploadone {
              width: 222px;
              height: 222px;
              float: left;
            }
            .uploadtwo {
              width: 148px;
              height: 148px;
            }
          }
          .up6 {
            width: 370px;
            height: 308px;
            .up6_top {
              display: flex;
            }
            .up6_bot {
              display: flex;
            }
            .uploadthree {
              width: 185px;
              height: 185px;
            }
            .uploadtwo {
              width: 123px;
              height: 123px;
            }
          }
        }
      }
    }
    // 中间设置
    .main_top {
      margin: 20px auto 0;
    }
    .main_content {
      margin-top: 10px;
      .graph_box::v-deep {
        padding: 10px;
        margin: 0 auto;
        .el-radio-group {
          margin-left: -5px;
        }
        .el-radio {
          margin-right: 8px;
          padding: 8px 0;
        }
      }
      .setgraph_box {
        .top_img {
          width: 370px;
          // height: 126px;
          margin: 0 auto;
          border-radius: 10px;
          background-color: #eeeeee;
          padding-bottom: 22px;
        }
        .top_img:hover {
          background: linear-gradient(180deg, #fee7e5, #f0ccff);
        }
      }
    }
  }
  .img_box {
    position: relative;
  }
  .img_box:hover {
    .el-icon-close {
      display: block;
    }
  }
  // 公共样式
  .el-icon-close {
    display: none;
    cursor: pointer;
    z-index: 200;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    font-weight: 600;
    font-size: 20px;
    font-style: normal;
    color: #5680fe;
    text-align: center;
    border-radius: 15px;
    transition: all linear 0.5s;
  }
  .el-icon-close:hover {
    background: #607bfe;
    color: #fff;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  .show_img {
    position: relative;
    width: 320px;
    height: 65px;
    margin: 0 auto;
    z-index: 200;
    background-position-y: bottom;
    background-size: 100%;
    .show_title {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 240px;
      height: 33px;
      line-height: 33px;
      // background-color: #fff;
    }
    .show_info {
      position: absolute;
      right: 2px;
      bottom: 0;
      width: 64px;
      height: 70px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      p {
        padding-top: 17px;
        width: 64px;
      }
      div {
        font-weight: 700;
        width: 45px;
        height: 27px;
        text-align: center;
        padding-bottom: 11px;
      }
    }
  }
  .show_img2 {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    z-index: 200;
    background-position-y: bottom;
    background-size: 100%;
    .show_title {
      text-align: center;
      width: 100%;
      height: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sh1 {
      align-items: flex-end;
    }
  }
  .show_img2.active {
    width: 120px;
    height: 120px;
  }
  .graph3_box::v-deep {
    // width: 411px;
    height: 388px;
    overflow: hidden;
    overflow-y: auto;
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .el-radio {
        margin-right: 0;
        .el-radio__input {
          display: none !important;
        }
      }
    }
    .graph3 {
      width: 175px !important;
      // margin: 0px 0px 20px !important;
      height: 175px !important;
      border-radius: 10px;
      background-color: #eeeeee;
      padding-bottom: 0px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .graph4_box::v-deep {
    width: 435px;
    height: 197px;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: auto;
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .el-radio {
        margin-right: 0;
        .el-radio__input {
          display: none !important;
        }
      }
    }
    .graph3 {
      width: 400px !important;
      // margin: 0px 0px 20px !important;
      height: 51px !important;
      border-radius: 10px;
      background-color: #eeeeee;
      padding-bottom: 0px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .iconfont_box {
      position: relative;
      width: 400px;
      height: 51px;
      text-align: center;
      .position_text {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        p {
          width: 122px;
          height: 41px;
          line-height: 41px;
        }
      }
    }
  }
  .graph5_box::v-deep {
    width: 415px;
    height: 340px;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: auto;
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .el-radio {
        margin-right: 0;
        .el-radio__input {
          display: none !important;
        }
      }
    }
    .graph3 {
      box-sizing: initial;
      width: 360px !important;
      padding: 15px 20px 10px 20px;
      margin-right: 15px;
      border-radius: 10px;
      background-color: #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .iconfont_box {
      position: relative;
      width: 360px;
      height: 100px;
      text-align: center;
      .position_text {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        // p{
        //   width: 122px;
        //   height: 41px;
        //   line-height: 41px;
        // }
      }
    }
  }
  .iconfont_box {
    position: relative;
    width: 175px;
    height: 175px;
    text-align: center;
    .position_text {
      position: absolute;
    }
  }
  .graph3:hover {
    background: linear-gradient(180deg, #fee7e5, #f0ccff);
  }
  .bg_box {
    position: relative;
    width: 130px;
    height: 130px;
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid #fe293c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 17px;
    box-sizing: border-box;
    letter-spacing: 1em;
    .bg_title {
      // position: absolute;
      font-weight: 500;
      box-sizing: border-box;
      z-index: 999;
    }
    .bg_h {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      border-top: 1px dashed #ffabb3;
      opacity: 0.5;
      font-weight: 400;
      font-style: normal;
      box-sizing: border-box;
    }
    .bg_s {
      position: absolute;
      top: 0;
      left: 50%;
      width: 1px;
      height: 100%;
      border-left: 1px dashed #ffabb3;
      opacity: 0.5;
      font-weight: 400;
      font-style: normal;
      box-sizing: border-box;
    }
  }
  .title4 {
    width: 86px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .uploadfive::v-deep {
    width: 140px;
    height: 140px;
    background-color: #fff;
    border-radius: 50%;
    flex-direction: column;
    color: #5490ff;
    overflow: hidden;
    user-select: none;
    background-size: 100% 100%;
    box-sizing: border-box;
    border: 1px solid red;
    margin: 0 auto;
    .el-upload-dragger {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .el-upload {
      width: 100%;
      height: 100%;
      // margin-top: 15px;
    }
    .img_box {
      height: 100%;
      position: relative;
      .el-icon-close {
        display: none;
        cursor: pointer;
        z-index: 200;
        position: absolute;
        top: 2px;
        right: 56px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background: #fff;
        font-weight: 600;
        font-size: 20px;
        font-style: normal;
        color: #5680fe;
        text-align: center;
        border-radius: 15px;
        transition: all linear 0.5s;
      }
      .el-icon-close:hover {
        background: #607bfe;
        color: #fff;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
      }
    }
    .img_box:hover {
      .el-icon-close {
        display: block;
      }
    }
  }
  // 定位活动标签
  .show_tabs {
    position: absolute;
    // width: 100%;
    .el-icon-close {
      display: none;
      cursor: pointer;
      z-index: 16;
      position: absolute;
      top: -10px;
      right: 2px;
      // float: right;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background: #fff;
      font-weight: 600;
      font-size: 14px;
      font-style: normal;
      color: #5680fe;
      text-align: center;
      border-radius: 15px;
      transition: all linear 0.5s;
    }
    .el-icon-close:hover {
      background: #607bfe;
      color: #fff;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }
  }
  .show_tabs:hover {
    cursor: move;
    user-select: none;
    .el-icon-close {
      display: inline-block;
    }
  }
}
</style>
